---
title: Kanaizu
date: 2020-09-29
description: 使用Routify和TailwindCSS构建的日语假名测验应用
demo: https://kanaizu.vercel.app
source: https://github.com/elianiva/kanaizu
type: personal
featured: true
stack:
    - ["Routify", "https://routify.dev"]
    - ["TailwindCSS", "https://tailwindcss.com"]
---

**Kanaizu** 是我在开始学习Svelte时制作的应用。我制作这个应用是因为我想帮助我的朋友记忆日语假名，因为我们在写这篇文章时都在学习日语。这也是因为我想尝试Routify。我花了大约一周时间制作这个应用，也许这太长了，但 hey，这是我第二次制作，所以我 barely 知道基础知识。

我从[Wikibooks](https://en.wikibooks.org/wiki/JLPT_Guide)获取了数据。它有大约508个单词。我随机挑选了它们，大部分是N5和N4级别的。我用一种奇怪的方法挑选它们。如您所见，他们提供的单词带有汉字，因为您在实际使用中会用到汉字。我只想要平假名或片假名版本。所以我做的是抓取数据并制作这个微小且低效的js脚本，将我从网站获得的数据（一个单词数组）转换为看起来像这样的对象。

```json
{
	"data": [
		{
			"hiragana": "たべる",
			"romaji": "taberu"
		},
		{
			"hiragana": "わかる",
			"romaji": "wakaru"
		}
	]
}
```

I converted it from kanji to hiragana/katakana using [this tool](https://nihongodera.com/tools/kana-converter). Big thanks for the creator of that tool. It would be _very_ tedious if it didn't exist. Imagine converting hundreds of words manually.

I use Tailwind CSS for this project which means that I have to setup postcss. Again, because this is my second time trying Routify and my first time setting up Tailwind CSS specifically for Routify, as expected, I messed up. I have no idea what I was doing until a few hours later but it's worth it. I learned something new.

If you're interested with this app, go ahead and try it yourself ツ

There's some inconsistency though, but it's _rarely_ appear. I can't fix it because it's quite unpredictable. Basically, it won't show your score. Just refresh the app if this happen.
